<template>
	<view>
		<view class="top-item-box">
			<view class="btn-box">
				<button type="primary" size="mini" @click="toAddProduct">新建产品</button>
			</view>
		</view>
		<view class="" style="height: 110rpx;"></view>
		<unicloud-db ref="udb" collection="tian-mall-products" field="shop_ID,name,goods_summary,goods_thumb,last_modify_date"
			:where="where" orderby="last_modify_date desc" page-data="add" :getcount="true" :page-size="options.pageSize"
			:page-current="options.pageCurrent" v-slot:default="{data, pagination, loading, hasMore}" :options="options"
			@load="loadData">
			<uv-list>
				<template v-for="(item,index) in data" :key="item._id">
					<uv-list-item clickable>
						<view class="list-item-box">
							<view class="item-in-box">
								<view class="image-box">
									<image :src="$thumbImg(item.goods_thumb,'200x200')" class="item-image"
										mode="aspectFit" @click="previewImage(item.goods_thumb)"></image>
								</view>

								<view class="right-box" @click="toEditProduct(item)">
									<view class="name-box">
										<text>{{item.name.length>28 ? item.name.slice(0,28)+'...':item.name}}</text>
									</view>
									<view class="desc-box">
										<text>{{item.goods_summary}}</text>
									</view>
								</view>
							</view>
							<view class="right-btn-icon" @click="toEditProduct(item)">
								<view class="btn-box">
									<text class="font-32 " style="color: deepskyblue;">修改</text>
								</view>
								<uni-icons type="right" size="24" color="#999"></uni-icons>
							</view>
						</view>
					</uv-list-item>
				</template>
			</uv-list>
			<!--  'loadmore' 下面的逻辑应该是对的，待测试 (此处待进一步测试)-->
			<!-- <uv-load-more :status="loading?'loading' :error ? (error.message || '没有更多数据') :'loadmore'"></uv-load-more> -->
			<uv-load-more v-if="loading" status="loading" />
			<uv-load-more v-else-if="pagination.count==0" status="nomore" />
			<uv-load-more v-else-if="Math.ceil(pagination.count/pagination.size) == pagination.current" status="nomore" />
			<!-- Math.ceil -->
			<uv-load-more v-else status="loadmore" />
		</unicloud-db>

	</view>
</template>

<script>
	const db = uniCloud.database()
	// 表查询配置
	const dbOrderBy = '' // 排序字段ID asc
	// const dbSearchFields = ['shop_name.full_name','address.address_number','phone.head'] // 模糊搜索字段，支持模糊搜索的字段列表
	// 分页配置
	const pageSize = 10
	const pageCurrent = 1
	export default {
		data() {
			return {
				statusBarHeight:88,
				shop_ID: '',
				shop_id: '',
				options: {
					pageSize,
					pageCurrent,
				},
				productData: [],
				loadStatus: 'loadmore'
			}
		},
		computed: {
			where() {
				return {
					shop_ID: this.shop_ID
				}
			}
		},
		onLoad(option) {
			if (option.id) {
				this.shop_id = option.id
			}
			if (option.shopID) {
				this.shop_ID = option.shopID
			}
			// #ifndef H5
			// 使用uni.getSystemInfoSync()获取系统信息
			const systemInfo = uni.getSystemInfoSync();
			// 获取状态栏高度
			this.statusBarHeight += systemInfo.statusBarHeight
			// #endif
		},
		onReachBottom() {
			// console.log('123');
			// this.loadStatus = 'loading';
			this.$refs.udb.loadMore()
		},
		methods: {
			test() {
				// console.log(this.shopID);
				// db.collection('tian-mall-shops').where(this.where).field('shop_name,address').get().then(res => {
				// 	console.log(res);
				// })
			},
			// 成功的回调
			loadData(data, pagination, loading, hasMore) {
				console.log(data, pagination, loading, hasMore);
				// const data = e;
				// if (data && data.length) {
				// 	// 将新数据加入到现有的list中
				// 	this.productData = [...this.productData, ...data];
				// 	this.loadStatus = 'loadmore';
				// } else {
				// 	this.loadStatus = 'nomore';
				// }
			},
			navBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			// shop_ID: '',
			// shop_id: '',
			toAddProduct(){
				uni.navigateTo({
					url: `/pages/shop/add-product?id=${this.shop_id}&ID=${this.shop_ID}`,
					events: {
						refreshData: () => {
							this.$refs.udb.loadData({
								clear:true
							})
						}
					},
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			toEditProduct(item) {
				uni.navigateTo({
					url: '/pages/shop/edit-product?id='+item._id,
					events: {
						refreshData: () => {
							this.$refs.udb.loadData({
								clear:true
							})
						}
					},
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			previewImage(img) {
				uni.previewImage({
					urls: [img]
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.top-item-box{
		width: 100%;
		height: 100rpx;
		background-color: #f1f1f1;
		position: fixed;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		left: 0;
		/* #ifdef MP-WEIXIN */
		top:0;
		/* #endif */
		/* #ifdef APP */
		top:0;
		/* #endif */
		/* #ifdef H5 */
		top:82rpx;
		/* #endif */
		z-index: 999;
		.btn-box{
			margin-right: 50rpx;
		}
	}
	.list-item-box {
		// margin: 10rpx 0;
		width: 100vw;
		padding: 10rpx 0rpx;
		margin: 10rpx 0;
		background-color: #f1f1f1;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.item-in-box {
			// width: 80%;
			margin: 0 30rpx;
			padding: 0 10rpx;
			border-radius: 10rpx;
			// background-color: #fff;
			display: flex;
			align-items: center;

			.image-box {
				width: 100rpx;
				height: 100rpx;

				.item-image {
					width: 100%;
					height: 100%;
					border-radius: 10rpx;
				}
			}


			.right-box {
				flex: 1;
				margin: 20rpx 0 20rpx 20rpx;
				padding: 20rpx 0;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.name-box {
					text {
						font-weight: 600;
						font-size: 28rpx;
						color: #555;
					}
				}

				.address-box {
					display: flex;
					align-items: center;

					text {
						margin-left: 10rpx;
						font-size: 28rpx;
						color: #777;
					}
				}

				.desc-box {
					display: flex;
					align-items: center;

					text {
						// margin-left: 10rpx;
						font-size: 24rpx;
						color: #777;
						display: flexbox;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
					}
				}
			}
		}

		.right-btn-icon {
			display: flex;
			align-items: center;
		}
	}
</style>